<template>
  <div class="w-240px bg-white shadow-md p-10px">
    <div class="mt-24px mb-20px text-16px text-#8A8C99">性别</div>
    <a-radio-group direction="vertical" v-model="selectFilter.sex" @change="handleChange">
      <a-radio :value="item.value" v-for="item in filterData.sex" :key="item.value">{{
        item.label
      }}</a-radio>
    </a-radio-group>
    <div class="mt-24px mb-20px text-16px text-#8A8C99">等级</div>
    <a-checkbox-group v-model="selectFilter.rank" @change="handleChange">
      <a-grid :cols="1" :colGap="12" :rowGap="6">
        <a-grid-item v-for="item in filterData.ranks" :key="item?.id" :span="12">
          <a-checkbox :value="item.id">{{ item.name }}</a-checkbox>
        </a-grid-item>
      </a-grid>
    </a-checkbox-group>
    <div class="mt-24px mb-20px text-16px text-#8A8C99">擅长</div>
    <a-checkbox-group v-model="selectFilter.position" @change="handleChange">
      <a-grid :cols="1" :colGap="12" :rowGap="8">
        <a-grid-item v-for="item in filterData.positions" :key="item?.id" :span="12">
          <a-checkbox :value="item.id">{{ item.name }}</a-checkbox>
        </a-grid-item>
      </a-grid>
    </a-checkbox-group>
  </div>
</template>
<script setup>
import { reactive, watchEffect } from 'vue'

const props = defineProps(['data'])
const emits = defineEmits(['onChange'])

const filterData = reactive({
  positions: [],
  ranks: [],
  sex: [
    { label: '全部', value: 0 },
    { label: '男', value: 1 },
    { label: '女', value: 2 }
  ]
})
watchEffect(() => {
  if (props.data) {
    filterData.positions = props.data.positions
    filterData.ranks = props.data.ranks
  }
})
const selectFilter = reactive({
  position: [],
  rank: [],
  sex: 0
})
const handleChange = () => {
  // console.log(selectFilter)
  emits('onChange', selectFilter)
}
</script>
<style lang="less" scoped>
:deep(.arco-checkbox-checked .arco-checkbox-icon) {
  background-color: #7733ff;
}
:deep(.arco-radio-checked .arco-radio-icon) {
  background-color: #7733ff;
  border-color: #7733ff;
}
</style>
